<template>
    <div>
        <el-carousel indicator-position="outside" type="card">
            <el-carousel-item v-for="item in 4" :key="item">
                <img :src="commodityList1[item].url" style="width: 60%;margin-left:20%">
            </el-carousel-item>
        </el-carousel>
    </div>
</template>

<script>
    export default {
        name: 'monitor-navigation',
        data () {
            return {
                commodityList: [],
                commodityList1: [],
                url: null
            }
        },
        computed: {
           
        },
        created () {
            this.getAllCommodity()
        },
        mounted () {
           
        },
        methods: {
            async getAllCommodity () {
                this.commodityList1 = []
                this.$http.get('/admin/findCommodity').then(res => {
                    this.commodityList = res.data.data.list
                    console.log(this.commodityList)
                    this.commodityList.forEach(element => {
                        this.getPicture(element)
                    })
                })
            },
            async getPicture (commodity) {
                this.$http.get('/image', { params: { 'imageName': commodity.picture_name }, responseType: 'blob' }).then(res => {
                    const blob = new Blob([res.data])
                    const url = window.URL.createObjectURL(blob)
                    this.url = url
                    this.$set(commodity, 'url', url)
                    this.commodityList1.push(commodity)
                })
            }
        }
    }
</script>

<style lang="postcss">
    .el-carousel__item h3 {
    color: #475669;
    font-size: 14px;
    opacity: 0.75;
    line-height: 200px;
    margin: 0;
  }
  
  .el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
  }
  
  .el-carousel__item:nth-child(2n+1) {
    background-color: #d3dce6;
  }
</style>
